<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>只读的列或者单元格</title>
  <script src="./js/jexcel.js"></script>
  <script src="./js/jsuites.js"></script>
  <link rel="stylesheet" href="./css/jsuites.css" type="text/css" />
  <link rel="stylesheet" href="./css/jexcel.css" type="text/css" />
</head>

<body>
  <h1>只读的列或者单元格</h1>

  <p>将整个列或单个特定单元格设置为只读。</p>
  <div id="spreadsheet"></div>
</body>
<script>
  var data = [
    ['Mazda', 2001, 2000, 1],
    ['Pegeout', 2010, 5000, 1],
    ['Honda Fit', 2009, 3000, 1],
    ['Honda CRV', 2010, 6000, 0],
  ];

  jspreadsheet(document.getElementById('spreadsheet'), {
    data: data,
    columns: [
      {
        type: 'text',
        title: 'Description',
        width: '200px',
        readOnly: true,
      },
      {
        type: 'text',
        title: 'Year',
        width: '200px'
      },
      {
        type: 'text',
        title: 'Price',
        width: '100px',
        mask: '#.##',
      },
      {
        type: 'checkbox',
        title: 'Automatic',
        width: '100px'
      },
    ],
    updateTable: function (el, cell, x, y, source, value, id) {
      if (x == 2 && y == 2) {
        cell.classList.add('readonly');
      }
    }
  });
</script>

</html>